<template>
  <div class="apply">
    <div class="tou">
      <el-button type="primary" @click="handleput('')">
        新增
        <i class="el-icon-plus el-icon--right"></i>
      </el-button>
    </div>
    <div class="table">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="user_name" label="姓名"></el-table-column>
        <el-table-column prop="mobile" label="手机号"></el-table-column>
        <el-table-column prop="group_name" label="权限组"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleput1()">修改密码</el-button> -->
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="handleput(scope.row)"
              v-if="scope.row.group_id!='-1'"
            >编辑</el-button>
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-delete"
              v-if="scope.row.group_id!='-1'"
              @click="handleDel(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="30%">
      <el-form :model="form" :rules="rules">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.user_name"></el-input>
        </el-form-item>
        <el-form-item label="旧密码" :label-width="formLabelWidth">
          <el-input v-model="form.old_password" autocomplete="off" placeholder="请输入旧密码"></el-input>
        </el-form-item>
        <el-form-item prop="phones" label="新密码" :label-width="formLabelWidth">
          <el-input
            oninput="value=value.replace(/[\W]/g,'')"
            maxlength="20"
            type="password"
            v-model="form.password"
            placeholder="请输入密码"
          />
        </el-form-item>

        <el-form-item prop="phones" label="新密码" :label-width="formLabelWidth">
          <el-input
            oninput="value=value.replace(/[\W]/g,'')"
            maxlength="20"
            type="password"
            v-model="form.password1"
            placeholder="请再次输入密码"
            @blur="Verification"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="queding">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="Visible" width="30%" center>
      <el-form
        :model="ruleForm"
        :rules="rules1"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="选择角色" prop="group_id">
          <el-select v-model="ruleForm.group_id" placeholder="请选择角色">
            <el-option
              v-for="(item,index) in data"
              :key="index"
              :label="item.group_name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名" prop="user_name">
          <el-input v-model="ruleForm.user_name"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="mobile">
          <el-input v-model="ruleForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="密码" :prop="ruleForm.id?'':'password'">
          <el-input v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item label="权限" prop="is_gai">
          <el-radio-group v-model="ruleForm.is_gai">
            <el-radio label="1">可以修改</el-radio>
            <el-radio label="2">不能修改</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label="状态" prop="resource">
          <el-radio-group v-model="ruleForm.resource">
            <el-radio label="1">启用</el-radio>
            <el-radio label="2">禁用</el-radio>
          </el-radio-group>
        </el-form-item>-->
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <div class="fenye">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="totalPage"
        :page-size="pageSize"
        @current-change="handleSizeChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
var isMobileNumber = (rule, value, callback) => {
  if (!value) {
    return new Error("请输入电话号码");
  } else {
    const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
    const isPhone = reg.test(value);
    value = Number(value); //转换为数字
    if (typeof value === "number" && !isNaN(value)) {
      //判断是否为数字
      value = value.toString(); //转换成字符串
      if (value.length < 0 || value.length > 12 || !isPhone) {
        //判断是否为11位手机号
        callback(new Error("手机号码格式如:138xxxx8754"));
      } else {
        callback();
      }
    } else {
      callback(new Error("请输入电话号码"));
    }
  }
};
import {
  admin_list,
  forget,
  group_select,
  create_user,
  admin_find,
  admin_del,
} from "../axios/api";
export default {
  data() {
    return {
      data: [],
      Visible: false,
      page: 0,
      totalPage: 0,
      currentPage: 1,
      pageSize: 0,
      formLabelWidth: "80px",
      form: {
        mima: "",
        password: "",
        old_password: "",
        name: "",

        token: sessionStorage.getItem("Token1"),
      },
      ruleForm: {
        password: "",
        group_id: "",
        mobile: "",
        user_name: "",
        is_gai: "",
        // resource: "1",
        token: sessionStorage.getItem("Token1"),
      },
      rules: {
        user_name: [
          { required: true, message: "请填写用户名", trigger: "blur" },
        ],
      },
      dialogFormVisible: false,
      disabled: true,
      tableData: [],
      multipleSelection: [],
      rules1: {
        user_name: [
          { required: true, message: "请填写用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        group_id: [
          { required: true, message: "请选择活动角色", trigger: "change" },
        ],
        mobile: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { validator: isMobileNumber, trigger: "blur" },
        ],
        is_gai: [{ required: true, message: "请选择权限", trigger: "change" }],
        // resource: [
        //   { required: true, message: "请选择活动资源", trigger: "change" },
        // ],
      },
    };
  },

  components: {},
  created() {
    this.admin_list();
    this.group_select();
  },
  methods: {
    group_select() {
      let params = {
        token: sessionStorage.getItem("Token1"),
      };
      group_select(params).then((res) => {
        this.data = res.data.data;
        console.log(this.data);
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = this.ruleForm;
          this.ruleForm.token = sessionStorage.getItem("Token1");
          if (this.ruleForm.id) {
            this.ruleForm.id = this.ruleForm.id + "";
          }
          create_user(params).then((res) => {
            console.log(res);
            if (res.data.code == 200) {
              this.$message({
                message: "成功",
                type: "success",
              });
              this.ruleForm = {};
              this.Visible = false;
              this.admin_list();
            } else {
              this.$message({
                message: res.data.msg,
              });
            }
          });
          this.ruleForm = {};
        } else {
          this.ruleForm = {};
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.ruleForm = {};
      this.Visible = false;
    },
    handleput(e) {
      console.log(e);
      if (e) {
        let params = {
          id: e.id,
          token: sessionStorage.getItem("Token1"),
        };
        admin_find(params).then((res) => {
          console.log(res);
          this.ruleForm = res.data.data;
          // this.data.forEach((item) => {
          //   console.log(item);
          //   if (this.ruleForm.group_id == item.id) {
          //     this.ruleForm.group_id = item.group_name;
          //   }
          // });
        });
      }
      this.Visible = true;
    },
    queding() {
      let params = this.form;
      forget(params).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.dialogFormVisible = false;
        }
      });
    },
    admin_list() {
      let params = {
        token: sessionStorage.getItem("Token1"),
        // page: this.currentPage4,
      };
      admin_list(params).then((res) => {
        console.log(res);
        this.currentPage = res.data.data.page + 0;
        this.totalPage = res.data.data.totalPage + 0;
        this.pageSize = parseInt(res.data.data.pageSize);
        this.tableData = res.data.data.data;
        this.tableData.forEach((item) => {
          if (item.group_id == -1) {
            item.group_name = "超级管理员";
          }
        });
        console.log(tableData);
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
    },
    Verification() {
      if (this.form.old_password.length >= 6) {
        if (this.form.old_password != this.form.password) {
          this.$message({
            message: "两次密码不一致请重新输入",
            type: "error",
          });
          this.form.password = "";
        }
      } else {
        this.form.password = "";
        this.form.old_password = "";
        this.$message({
          message: "密码最低为6位数",
          type: "error",
        });
      }
    },
    handleput1(e) {
      this.dialogFormVisible = true;
      this.form = {};
    },
    handleDel(e) {
      let params = {
        token: sessionStorage.getItem("Token1"),
        id: e.id,
      };
      admin_del(params).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.admin_list();
        }
      });
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      console.log(val);
      if (val.length == this.tableData.length) {
        this.disabled = false;
      } else {
        this.disabled = true;
      }
      this.multipleSelection = val;
    },
  },
};
</script>

<style scoped>
.apply {
  width: 100%;
  height: 100%;
  background-color: #fff;
  overflow: hidden;
}
.table {
  height: 80%;
  overflow-y: auto;
  box-sizing: border-box;
  margin: 0 20px;
}
.caozuo {
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  justify-content: space-between;
}
.fenye {
  width: 100%;
  display: flex;
  justify-content: center;
}
.tou {
  margin: 10px 20px;
}
</style>